<template>
  <div class="bar3dGlobalPopulation" id="bar3dGlobalPopulation"></div>
</template>

<script>
import axios from "axios";
export default {
  name: "bar3dGlobalPopulation",
  //import引入的组件需要注入到对象中才能使用",
  components: {},
  data() {
    //这里存放数据",
    return {};
  },
  //监听属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    drawBar3dGlobalPopulation() {
      let ROOT_PATH =
        "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";
      // 基于准备好的dom，初始化echarts实例
      let bar3dGlobalPopulation = this.$echarts.init(
        document.getElementById("bar3dGlobalPopulation")
      );
      // 绘制图表
      axios({
        method: "get",
        url: ROOT_PATH + "/data-gl/asset/data/population.json",
        headers: { "X-Requested-With": "XMLHttpRequest" }
      }).then(function(data) {
        data = data
          .filter(function(dataItem) {
            return dataItem[2] > 0;
          })
          .map(function(dataItem) {
            return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];
          });

        bar3dGlobalPopulation.setOption({
          backgroundColor: "#cdcfd5",
          geo3D: {
            map: "world",
            shading: "lambert",
            light: {
              main: {
                intensity: 5,
                shadow: true,
                shadowQuality: "high",
                alpha: 30
              },
              ambient: {
                intensity: 0
              },
              ambientCubemap: {
                texture: "data-gl/asset/canyon.hdr",
                exposure: 1,
                diffuseIntensity: 0.5
              }
            },
            viewControl: {
              distance: 50,
              panMouseButton: "left",
              rotateMouseButton: "right"
            },
            groundPlane: {
              show: true,
              color: "#999"
            },
            postEffect: {
              enable: true,
              bloom: {
                enable: false
              },
              SSAO: {
                radius: 1,
                intensity: 1,
                enable: true
              },
              depthOfField: {
                enable: false,
                focalRange: 10,
                blurRadius: 10,
                fstop: 1
              }
            },
            temporalSuperSampling: {
              enable: true
            },
            itemStyle: {},

            regionHeight: 2
          },
          visualMap: {
            max: 40,
            calculable: true,
            realtime: false,
            inRange: {
              color: [
                "#313695",
                "#4575b4",
                "#74add1",
                "#abd9e9",
                "#e0f3f8",
                "#ffffbf",
                "#fee090",
                "#fdae61",
                "#f46d43",
                "#d73027",
                "#a50026"
              ]
            },
            outOfRange: {
              colorAlpha: 0
            }
          },
          series: [
            {
              type: "bar3D",
              coordinateSystem: "geo3D",
              shading: "lambert",
              data: data,
              barSize: 0.1,
              minHeight: 0.2,
              silent: true,
              itemStyle: {
                color: "orange"
                // opacity: 0.8
              }
            }
          ]
        });
      });
    }
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {},

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {},
  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {},

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
    this.drawBar3dGlobalPopulation();
  },

  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {},
  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {},
  //生命周期 - 销毁之前",
  beforeDestroy() {},
  destroyed() {},
  //生命周期 - 销毁完成",
  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {}
};
</script>

<style>
.bar3dGlobalPopulation {
  width: 100%;
  height: 300px;
}
</style>
